@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@import 'highlight.js/styles/hybrid.css' layer(base);

@import './buttons.css' layer(utilities);
@import './labels.css' layer(utilities);
@import './modal.css' layer(utilities);
@import './replies.css' layer(utilities);
@import './tables.css' layer(utilities);
@import './tags.css' layer(utilities);

@config '../../tailwind.config.js';

@custom-variant dark (&:where(.dark, .dark *));

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@theme {
    --font-sans: Inter, sans-serif;
}

.number-block {
    box-shadow: 20px 0 40px 5px #e6f6f3 inset, -20px 0 10px 5px #e6f6f3 inset;
}

a > span > em {
    @apply bg-lio-100;
}

.search {
    @apply w-full;
}

@media (width >= theme(--breakpoint-lg)) {
    .search {
        width: 720px;
    }
}

pre .hljs {
    @apply p-4;
}

.forum-content code {
    background: #f8f8f8;
    color: #333;
}

svg .primary {
    @apply text-gray-800 fill-current;
}

svg .secondary {
    @apply text-lio-500 fill-current;
}

[x-cloak] {
    display: none;
}

.nav a {
    @apply border-transparent text-gray-500;
}

.nav a:hover {
    @apply text-gray-700 border-lio-500;
}

.nav a.active {
    @apply border-lio-500 text-gray-900;
}

.nav a.active:focus {
    @apply border-lio-600;
}

.nav .dropdown a {
    @apply block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out;
}

.nav .dropdown a:hover {
    @apply bg-gray-100;
}

.nav .dropdown a:focus {
    @apply outline-hidden bg-gray-100;
}

/** Choices.js **/
.choices__input.choices__input--cloned {
    @apply hidden;
}

.choices__inner {
    @apply rounded-md! border! border-gray-300! w-full! bg-white! p-2! items-center!;
}

.choices__list--dropdown {
    @apply border! border-gray-300!;
}

.choices__list--single {
    @apply p-0!;
}

.choices__item {
    @apply text-sm! bg-gray-200! text-gray-700! cursor-pointer! rounded-md! px-2! py-1! my-0! border-0!;
}

.choices__item.choices__item--choice {
    @apply rounded-none! py-2!;
}

.choices__item.choices__item--choice.choices__item--selectable {
    @apply bg-white! rounded-none! text-gray-700! p-2!;
}

.choices__item.choices__item--choice.choices__item--selectable:hover {
    @apply bg-gray-200!;
}

.choices__item.choices__item--selectable {
    @apply bg-lio-500! border-lio-500! text-white!;
}

.choices__list--single > .choices__item.choices__item--selectable {
    @apply bg-white! text-gray-700!;
}

.choices__item.is-highlighted {
    @apply bg-lio-600! border-lio-600! text-white!;
}

.choices[data-type*='select-one']:after {
    border-color: var(--color-gray-500) transparent transparent transparent !important;
}

.choices[data-type*='select-one'] .choices__input {
    @apply rounded-none! border-b-2! border-gray-300!;
}

.editor li[aria-selected='true'] {
    @apply bg-lio-100;
}

article iframe {
    @apply w-full h-64;
}

@media (width >= theme(--breakpoint-sm)) {
    article iframe {
        @apply h-96;
    }
}